<!-- ProfileCard.vue -->
<template>
  <div class="profile-card">
    <img src="@/assets/logo2.png" alt="Profile Picture" class="profile-picture" />
    <div class="profile-info">
      <p class="name">{{ profile.name }}</p>
      <p class="school">{{ profile.school }} - {{ profile.sdept }}{{ profile.sclass }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, reactive } from 'vue';

interface IProfile {
  name: string,
  grade: string,
  sclass: string,
  school: string,
  sdept: string,
  image: string
}
const profile: IProfile = reactive({
  name: '',
  grade: '',
  sclass: '',
  school: '',
  sdept: '',
  image: ''
})

const getProfile = async () => {
  await axios.get('student/pl')
    .then(res => {
      if(res.data.code === 200) {
        profile.name = res.data.data.sname
        profile.sclass = res.data.data.sclass
        profile.sdept = res.data.data.sdept
        profile.school = res.data.data.school
        profile.grade = res.data.data.grade
      } else {
        ElMessage({
          message: res.data.msg,
          type: 'warning'
        })
      }
    })
}

onMounted( () => {
  getProfile()
})
</script>

<style scoped>
.profile-card {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 300px; /* Adjust width as needed */
  margin: 10px auto;
}

.profile-picture {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 20px;
  object-fit: cover;
}

.profile-info {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.school {
  font-size: 14px;
  color: gray;
  margin: 4px 0 0;
}
</style>
